<%--
  Created by IntelliJ IDEA.
  User: lucky
  Date: 2024/4/2
  Time: 22:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录历史</title>
    <jsp:include page="../../common/css_js.jsp"/>
    <jsp:include page="../../common/table.jsp"/>
</head>
<body>
<div class="container col-lg-12">
    <div class="card">
        <header class="card-header">
            <div class="card-title">
                <b style="font-size: 25px">登录历史--所有登录历史</b>
            </div>
        </header>
        <div class="card-body">
            <form
                    class="form-inline"
                    name="form1"
                    action="#"
                    method="post"
            >
                <b>用户名称：</b>
                <label>
                    <input
                            name="username"
                            style="width: 150px"
                            placeholder="请输入用户名称"
                            class="form-control"
                    /> </label
                >&nbsp;&nbsp;
                <b>登录城市：</b>
                <label>
                    <input
                            name="city"
                            style="width: 150px"
                            placeholder="请输入登录城市"
                            class="form-control"
                    /> </label
                >&nbsp;
                <b>状态：</b>
                <div class="custom-control custom-radio custom-control-inline">
                    <input
                            type="radio"
                            id="customRadioInline33"
                            name="status"
                            value=""
                            checked="checked"
                            class="custom-control-input"
                    />
                    <label class="custom-control-label" for="customRadioInline33"
                    >全部</label
                    >
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                    <input
                            type="radio"
                            id="customRadioInline11"
                            name="status"
                            value="2"
                            class="custom-control-input"
                    />
                    <label class="custom-control-label" for="customRadioInline11"
                    >成功</label
                    >
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                    <input
                            type="radio"
                            id="customRadioInline22"
                            name="status"
                            value="1"
                            class="custom-control-input"
                    />
                    <label class="custom-control-label" for="customRadioInline22"
                    >失败</label
                    >
                </div>
                <button type="button" class="btn btn-primary" onclick="like()">
                    <span class="mdi mdi-table-search"></span>搜索
                </button>
            </form>
            <div id="toolbar">
                <a class="btn btn-danger" href="#" onclick="batchDelete('login-history')"
                ><span class="mdi mdi-delete"></span>批量删除</a
                >
                &nbsp;
                <a class="btn btn-primary" href="#" onclick="query()"
                ><span class="mdi mdi-table-large"></span>显示所有</a
                >
                &nbsp;&nbsp;
            </div>
            <div class="table-responsive">
                <table id="table"></table>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        // 初始化表格
        $('#table').bootstrapTable({
            classes: 'table table-bordered table-hover table-striped',
            url: '${ctx}/login-history/list',
            method: 'GET',
            toolbar: '#toolbar', // 工具按钮容器
            pagination: true,
            pageNumber: 1,
            pageSize: 10,
            paginationLoop: false,
            pageList: [5, 10, 15, 20],
            clickToSelect: true, // 是否启用点击选中行
            showFullscreen: true, // 显示全屏
            undefinedText: '-', // 当字段为 undefined 显示
            sortOrder: "asc", // 排序方式
            showColumns: true, // 是否显示所有的列
            showRefresh: true, // 是否显示刷新按钮
            showToggle: true, // 是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)
            showExport: true,        // 是否显示导出按钮, 导出功能需要导出插件支持(tableexport.min.js)
            exportDataType: "all", // 导出数据类型, 'basic':当前页, 'all':所有数据, 'selected':选中的数据
            // 响应处理
            responseHandler: function (res) {
                if (res.code !== 200) {
                    notify("mdi mdi-close", res.message, "danger");
                    return [];
                }
                return res.data;
            },
            // 查询参数
            queryParams: function () {
                return $("form:eq(0)").serializeArray();
            },
            columns: [{
                field: 'example',
                checkbox: true
            }, {
                field: 'no',
                align: 'center',
                title: '序号',
                formatter: function (value, row, index) {
                    //返回序号，注意index是从0开始的，所以要加上1
                    return index + 1;
                }
            }, {
                field: 'id',
                title: '编号',
                visible: false
            }, {
                field: 'username',
                align: 'center',
                title: '登录用户'
            }, {
                field: 'driverName',
                align: 'center',
                title: '浏览器'
            }, {
                field: 'osName',
                align: 'center',
                title: '操作系统'
            }, {
                field: 'province',
                align: 'center',
                title: '登录省份'
            }, {
                field: 'city',
                align: 'center',
                title: '登录城市'
            }, {
                field: 'ip',
                align: 'center',
                title: '登录IP'
            }, {
                field: 'status',
                align: 'center',
                title: '登录状态',
                formatter: (value, row, index) => {
                    if (value === 2) {
                        return '<span class="badge badge-success">成功</span>';
                    } else if (value === 1) {
                        return '<span class="badge badge-danger">失败</span>';
                    } else {
                        return '<span class="badge badge-warning">未知</span>';
                    }
                }
            }, {
                field: 'description',
                align: 'center',
                title: '描述'
            }, {
                field: 'createDate',
                align: 'center',
                title: '登录时间'
            }],
            onLoadSuccess: function (res) {      // 数据加载成功时调用的方法
            },
            onLoadError: function () {        // 数据加载失败时调用的方法
                setTimeout(function () {
                    notify("mdi mdi-close", "数据加载失败!", "danger");
                }, 300);
            },
            onCheck: function () {        // 复选框选中事件
                getSelections();
            }
        });
    });
</script>

</body>
</html>
